<template>
  <section id="complete" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <!-- 标题 -->
      <div class="text-center mb-14" style="text-align: center;margin-top: 100px;">
        <h2 class="text-[clamp(2rem,4vw,3rem)] font-extrabold mb-3 text-primary" style="font-size: 30px;">完成组队</h2>
        <p class="text-gray-400 max-w-2xl mx-auto text-lg">加入小组后，你可以使用这些功能来管理和参与学习</p>
      </div>

      <!-- 我的小组 -->
      <div class="mb-14" style="margin-bottom: 50px; width: 1200px;">
        <h3 class="text-xl font-bold mb-6" style="font-size: 20px;font-weight: bold;">我的小组</h3>
        <el-row :gutter="24">
          <el-col :xs="24" :md="12">
            <el-card shadow="hover" class="transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6">
              <template #header style="padding: 0;">
                <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #e7eeff;">
                  <div class="flex justify-between items-center">
                  <span class="font-semibold text-lg">Web前端开发学习小组</span>
                  <div class="text-gray-500 mb-4 text-base" style="font-size: 16px;color: #666;">JavaScript / Vue / React</div>
                </div>
                <el-tag type="success" class="rounded-full px-4 py-1 text-base">已加入</el-tag>
                </div>
                
              </template>

              <div class="flex justify-between items-center mb-4" style="display: flex;justify-content: space-between;">
                <div>
                  <span class="text-gray-400">小组进度：</span>
                  <span class="font-bold text-lg">68%</span>
                </div>
                <div class="flex items-center" style="display: flex;align-items: center;">
                  <span class="text-gray-400 mr-2">成员：</span>
                  <div class="flex -space-x-3">
                    <!-- 成员头像 -->
                    <img src="https://picsum.photos/id/1001/40/40" alt="成员" class="w-10 h-10 rounded-full border-4 border-white shadow">
                    <img src="https://picsum.photos/id/1002/40/40" alt="成员" class="w-10 h-10 rounded-full border-4 border-white shadow">
                    <img src="https://picsum.photos/id/1003/40/40" alt="成员" class="w-10 h-10 rounded-full border-4 border-white shadow">
                    <div class="w-10 h-10 rounded-full border-4 border-white bg-gray-100 flex items-center justify-center text-xs font-semibold shadow">+2</div>
                  </div>
                </div>
              </div>
              <el-progress :percentage="68" color="#165DFF" class="mb-4"></el-progress>
              <div class="grid grid-cols-3 gap-3">
                <el-button link class="text-primary font-semibold hover:bg-primary/10 rounded-full"><i class="fa fa-book mr-1"></i> 学习笔记</el-button>
                <el-button link class="text-primary font-semibold hover:bg-primary/10 rounded-full"><i class="fa fa-question-circle mr-1"></i> 问答讨论</el-button>
                <el-button link class="text-primary font-semibold hover:bg-primary/10 rounded-full"><i class="fa fa-gamepad mr-1"></i> 学习游戏</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 小组功能卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8" style="display: flex;justify-content: space-between;">
        <!-- 小组学习进度 -->
        <el-card shadow="hover" class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6" style="height: 420px;width: 300px;">
          <template #header>
            <div class="flex items-start">
              <div class="w-12 h-12 icon-circle icon-blue flex items-center justify-center text-primary text-2xl shadow">
                <i class="fa fa-line-chart"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-bold">小组学习进度</h3>
                <p class="text-gray-500 text-sm">查看和管理小组整体及成员个人学习进度</p>
              </div>
            </div>
          </template>
          <div class="flex-1 flex flex-col mb-3">
            <canvas id="progressChart" width="400" height="200"></canvas>
          </div>
          <el-button class="w-full mt-auto rounded-full text-primary btn-blue" plain>查看详情</el-button>
        </el-card>

        <!-- 小组学习笔记 -->
        <el-card shadow="hover" class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6" style="height: 420px;width: 300px;">
          <template #header>
            <div class="flex items-start">
              <div class="w-12 h-12 icon-circle icon-purple flex items-center justify-center text-secondary text-2xl shadow">
                <i class="fa fa-file-text-o"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-bold">小组学习笔记</h3>
                <p class="text-gray-500 text-sm">上传、编辑和共享学习笔记，共同进步</p>
              </div>
            </div>
          </template>
          <div class="flex-1 flex flex-col space-y-3 mb-3">
            <el-card class="box-card rounded-xl border border-gray-100"  style="height: 100px;">
              <template #header>
                <div class="card-header">
                  <span>Vue3组件开发技巧</span>
                </div>
              </template>
              <div class="text item">张三 · 2小时前</div>
            </el-card>
            <el-card class="box-card rounded-xl border border-gray-100">
              <template #header>
                <div class="card-header">
                  <span>React Hooks使用指南</span>
                </div>
              </template>
              <div class="text item">李四 · 昨天</div>
            </el-card>
          </div>
          <el-button class="w-full mt-auto rounded-full text-secondary btn-purple" plain>查看全部笔记</el-button>
        </el-card>

        <!-- 小组学习问答 -->
        <el-card shadow="hover" class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6" style="height: 420px;width: 300px;">
          <template #header>
            <div class="flex items-start">
              <div class="w-12 h-12 icon-circle icon-green flex items-center justify-center text-success text-2xl shadow">
                <i class="fa fa-comments-o"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-bold">小组学习问答</h3>
                <p class="text-gray-500 text-sm">发布问题、回答问题，共同解决学习中遇到的难题</p>
              </div>
            </div>
          </template>
          <div class="flex-1 flex flex-col space-y-3 mb-3">
            <el-card class="box-card rounded-xl border border-gray-100">
              <template #header>
                <div class="card-header">
                  <span>如何优化React应用的性能？</span>
                </div>
              </template>
              <div class="text item flex items-center space-x-2">
                <el-tag type="warning" size="small" class="rounded-full px-3">待解答</el-tag>
                <span>王五 · 3小时前</span>
              </div>
            </el-card>
            <el-card class="box-card rounded-xl border border-gray-100">
              <template #header>
                <div class="card-header">
                  <span>Vuex和Pinia的区别是什么？</span>
                </div>
              </template>
              <div class="text item flex items-center space-x-2">
                <el-tag type="success" size="small" class="rounded-full px-3">已解答</el-tag>
                <span>赵六 · 昨天</span>
              </div>
            </el-card>
          </div>
          <el-button class="w-full mt-auto rounded-full text-success btn-green" plain>进入问答区</el-button>
        </el-card>

        <!-- 小组学习邀请 -->
        <el-card shadow="hover" class="card-unify transition-all transform hover:-translate-y-1 rounded-2xl shadow-xl p-6" style="height: 420px;width: 300px;">
          <template #header>
            <div class="flex items-start">
              <div class="w-12 h-12 icon-circle icon-orange flex items-center justify-center text-warning text-2xl shadow">
                <i class="fa fa-share-alt"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-bold">小组学习邀请</h3>
                <p class="text-gray-500 text-sm">邀请好友加入小组，分享邀请口令</p>
              </div>
            </div>
          </template>
          <div class="flex-1 flex flex-col text-center mb-4" style="text-align: center;">
            <div class="bg-gray-100 p-3 rounded-xl inline-block shadow">
              <div class="font-bold text-2xl mb-1 tracking-widest">ABCD-1234</div>
              <div class="text-sm text-gray-500">邀请口令</div>
            </div>
          </div>
          <div class="flex space-x-2 mb-3 justify-center" style="display: flex;justify-content: center; margin-top: 30px;">
            <el-button plain class="rounded-full px-4 text-warning btn-orange"><i class="fa fa-copy mr-1"></i> 复制口令</el-button>
            <el-button plain class="rounded-full px-4 text-warning btn-orange"><i class="fa fa-share-alt mr-1"></i> 分享</el-button>
          </div>
          <div class="flex items-center justify-between mt-auto"style="margin-top: 30px;text-align: right;">
            <span class="text-gray-500">开放状态：</span>
            <el-switch v-model="inviteStatus" active-color="#165DFF" inactive-color="#F53F3F"></el-switch>
          </div>
        </el-card>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';

// 状态变量
const progressColor = ref('#165DFF');
const inviteStatus = ref(true);

// 生命周期钩子
onMounted(() => {
  // 初始化进度图表
  const ctx = document.getElementById('progressChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['张三', '李四', '王五', '赵六', '平均'],
      datasets: [{
        label: '学习进度',
        data: [75, 82, 65, 90, 78],
        backgroundColor: [
          'rgba(22, 93, 255, 0.7)',
          'rgba(114, 46, 209, 0.7)',
          'rgba(0, 180, 42, 0.7)',
          'rgba(255, 125, 0, 0.7)',
          'rgba(22, 93, 255, 0.4)'
        ],
        borderColor: [
          'rgba(22, 93, 255, 1)',
          'rgba(114, 46, 209, 1)',
          'rgba(0, 180, 42, 1)',
          'rgba(255, 125, 0, 1)',
          'rgba(22, 93, 255, 0.7)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true,
          max: 100
        }
      }
    }
  });
});
</script>

<style scoped>
:root {
  --primary: #165DFF;
  --secondary: #722ED1;
  --success: #00B42A;
  --warning: #FF7D00;
  --dark: #2c3e50;
  --card-radius: 24px;
  --card-shadow: 0 8px 32px rgba(22,93,255,0.08), 0 1.5px 4px rgba(0,0,0,0.04);
}

:deep(.el-card) {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
}

:deep(.el-card:hover) {
  box-shadow: 0 16px 40px rgba(22,93,255,0.12), 0 3px 8px rgba(0,0,0,0.08);
  transform: translateY(-6px) scale(1.02);
}

:deep(.el-button) {
  border-radius: 999px;
  font-size: 1rem;
  padding: 0.75em 2em;
}

:deep(.el-input__inner), :deep(.el-select), :deep(.el-radio-group) {
  border-radius: 999px;
  min-height: 44px;
  font-size: 1rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--primary);
  letter-spacing: 1px;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 2.5rem;
  opacity: 0.85;
}

.bg-section {
  background: linear-gradient(135deg, #f8faff 0%, #f3f0ff 100%);
  border-radius: 2rem;
  padding: 3rem 2rem;
  margin-bottom: 2.5rem;
}

:deep(.el-card__header) {
  background-color: transparent;
  padding: 20px;
  border-bottom: none;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-progress-bar__inner) {
  background-color: var(--primary) !important;
}

.box-card {
  width: 100%;
  border: 1px solid #f0f0f0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card .item {
  color: #99a9bf;
}

.box-card .box-item {
  color: #606c71;
}

:deep(.el-card) {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
}

:deep(.el-card:hover) {
  box-shadow: 0 16px 40px rgba(22,93,255,0.12), 0 3px 8px rgba(0,0,0,0.08);
  transform: translateY(-6px) scale(1.02);
}

:deep(.el-button) {
  border-radius: 999px;
  font-size: 1rem;
  padding: 0.75em 2em;
}

:deep(.el-input__inner), :deep(.el-select), :deep(.el-radio-group) {
  border-radius: 999px;
  min-height: 44px;
  font-size: 1rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--primary);
  letter-spacing: 1px;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 2.5rem;
  opacity: 0.85;
}

.bg-section {
  background: linear-gradient(135deg, #f8faff 0%, #f3f0ff 100%);
  border-radius: 2rem;
  padding: 3rem 2rem;
  margin-bottom: 2.5rem;
}

.card-unify {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.icon-circle {
  border-radius: 50%;
  background: #f0f6ff;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(22,93,255,0.08);
}
.icon-blue {
  background: #eaf4ff;
}
.icon-purple {
  background: #f3eaff;
}
.icon-green {
  background: #eafff3;
}
.icon-orange {
  background: #fff7ea;
}
.btn-blue {
  color: #165DFF !important;
  border-color: #b3d8ff !important;
  background: #eaf4ff !important;
}
.btn-purple {
  color: #722ED1 !important;
  border-color: #d3b3ff !important;
  background: #f3eaff !important;
}
.btn-green {
  color: #00B42A !important;
  border-color: #b3ffd8 !important;
  background: #eafff3 !important;
}
.btn-orange {
  color: #FF7D00 !important;
  border-color: #ffdcb3 !important;
  background: #fff7ea !important;
}
</style>